<template>
  <div>
    <a-table
      :columns="menuItemColumns"
      :data-source="menuItemData"
      rowKey="id"
      :scroll="{ y: 560 }"
      :expandedRowKeys="firstExpandedRowKeys"
    >
      <template #expandIcon="props">
        <span style="cursor: pointer" @click="expandedRowsChange(props)">
          <iconpark-icon :name="props.record.icon"></iconpark-icon>
        </span>
      </template>
      <template #icon="{ text }">
        <a-tooltip placement="top">
          <template #title>
            <span>{{ text }}</span>
          </template>
          <iconpark-icon :name="text"></iconpark-icon>
        </a-tooltip>
      </template>
      <template #isSubMenu="{ record }">
        <a-switch v-model:checked="record.isSubMenu" :disabled="true" />
      </template>
      <template #hasMenuItemGroup="{ record }">
        <a-switch v-model:checked="record.hasMenuItemGroup" :disabled="true" />
      </template>
      <template #action="{ record }">
        <a-popconfirm title="是否删除?" @confirm="onDelete(record.menuItemId)">
          <a-button type="default" shape="circle">
            <template #icon><iconpark-icon name="delete"></iconpark-icon></template>
          </a-button>
        </a-popconfirm>
        <a-button type="default" shape="circle" class="ml-1" @click="onupdate(record)">
          <template #icon><iconpark-icon name="update"></iconpark-icon></template>
        </a-button>
      </template>
      <template #expandedRowRender>
        <a-list
          :loading="childrentLoading"
          item-layout="horizontal"
          :data-source="menuItemGroupData"
        >
          <template #renderItem="{ item }">
            <a-list-item>
              <template #actions>
                <a-popconfirm title="是否删除?" @confirm="onSonDelete(item)">
                  <a-button type="default" shape="circle">
                    <template #icon>
                      <iconpark-icon name="delete"></iconpark-icon>
                    </template>
                  </a-button>
                </a-popconfirm>
                <a-button
                  type="default"
                  shape="circle"
                  class="ml-1"
                  @click="onSonupdate(item)"
                >
                  <template #icon><iconpark-icon name="update"></iconpark-icon></template>
                </a-button>
              </template>
              <a-list-item-meta>
                <template #title>
                  <span>{{ item.menuItemGroupTitle }}</span>
                </template>
                <template #avatar>
                  <iconpark-icon
                    class="mr-1"
                    :name="item.menuItemGroupIcon"
                  ></iconpark-icon>
                </template>
              </a-list-item-meta>
            </a-list-item>
          </template>
        </a-list>
      </template>
    </a-table>
    <MenuItemodel ref="menuItemModel" @upSuccess="getMenuItem"></MenuItemodel>
    <MenuItemGrouModel
      ref="menuItemGroupModel"
      @upSuccess="getMenuItemGroup"
    ></MenuItemGrouModel>
  </div>
</template>

<script>
import { defineComponent, getCurrentInstance, onMounted, ref } from "vue";
import MenuItemodel from "./menuItemodel.vue";
import MenuItemGrouModel from "./menuItemGrouModel.vue";
import { message } from "ant-design-vue";
const menuItemColumns = [
  {
    title: "菜单标题",
    width: 200,
    ellipsis: true,
    dataIndex: "menuTitle",
    fixed: "left",
  },
  {
    title: "是否为内嵌菜单",
    dataIndex: "isSubMenu",
    align: "center",
    slots: { customRender: "isSubMenu" },
  },
  {
    title: "Action",
    fixed: "right",
    align: "center",
    width: 110,
    slots: { customRender: "action" },
  },
];
export default defineComponent({
  components: {
    MenuItemodel,
    MenuItemGrouModel,
  },

  setup() {
    const { proxy } = getCurrentInstance();
    const menuItemData = ref([]);
    const menuItemGroupData = ref([]);
    const firstExpandedRowKeys = ref([]);
    const childrentLoading = ref(false);
    const menuItemModel = ref("");
    const menuItemGroupModel = ref("");
    function getMenuItem() {
      proxy.$api.get("menuitem").then((res) => {
        if (res.error === 0) menuItemData.value = res.message;
        else message.error(res.message);
      });
    }
    onMounted(() => {
      getMenuItem();
    });
    function getMenuItemGroup(id) {
      childrentLoading.value = true;
      proxy.$api.get("menuitemGroup/byId?id=" + id).then((res) => {
        if (res.error === 0) {
          menuItemGroupData.value = res.message;
        }
        childrentLoading.value = false;
      });
    }
    function expandedRowsChange(record) {
      if (record.expanded) {
        firstExpandedRowKeys.value = [];
        menuItemGroupData.value = [];
      } else {
        //遍历数据列表
        menuItemData.value.map((item, index) => {
          //将当前点击的 行 下标复制给firstExpandedRowKeys 来锁定展开的行
          if (item.id === record.record.id) {
            childrentLoading.value = true;
            proxy.$api.get("menuitemGroup/byId?id=" + item.menuItemId).then((res) => {
              if (res.error === 0) {
                if (typeof res.message === "object") {
                  menuItemGroupData.value = res.message;
                  firstExpandedRowKeys.value = [item.id];
                }
              }
              childrentLoading.value = false;
            });
          }
        });
      }
    }
    function onDelete(id) {
      proxy.$api.get("menuitem/delete?id=" + id).then((res) => {
        if (res.error === 0) {
          message.success(res.message);
          getMenuItem();
        } else message.error(res.message);
      });
    }
    function onupdate(data) {
      menuItemModel.value.onupdate(data);
    }
    function onSonDelete(record) {
      childrentLoading.value = true;
      proxy.$api.get("menuitemGroup/delete?id=" + record.menuItemGroupId).then((res) => {
        if (res.error === 0) {
          message.success(res.message);
          getMenuItemGroup(record.subMenuId);
        } else message.error(res.message);
        childrentLoading.value = false;
      });
    }
    function onSonupdate(data) {
      menuItemGroupModel.value.onupdate(data);
    }
    return {
      menuItemData,
      menuItemColumns,
      menuItemGroupData,
      childrentLoading,
      firstExpandedRowKeys,
      menuItemModel,
      menuItemGroupModel,
      onDelete,
      onupdate,
      onSonDelete,
      onSonupdate,
      expandedRowsChange,
      getMenuItem,
      getMenuItemGroup,
    };
  },
});
</script>

<style lang="scss" scoped></style>
